<template>
  <view class="container">
    <view class="item" v-for="item in list" :key="item.id" @click="godetail(item)">
      <!-- 头部 -->
      <view class="header">
        <view style="display: flex; align-items: center">
          <image src="../../static/mine/time.png" style="width: 28rpx; height: 28rpx; margin-right: 14rpx" mode=""></image>
          <text style="font-weight: 500; font-size: 28rpx; color: #222222">{{ item.calltime }}</text>
        </view>
        <view style="font-weight: 500; font-size: 28rpx; color: #3483f6" v-if="item.status == 2">呼叫中</view>
        <view style="font-weight: 500; font-size: 28rpx; color: #3483f6" v-if="item.status == 3">司机已接单</view>
        <view style="font-weight: 500; font-size: 28rpx; color: #3483f6" v-if="item.status == 4">司机已到达起点</view>
        <view style="font-weight: 500; font-size: 28rpx; color: #3483f6" v-if="item.status == 5">行程中</view>
        <view style="font-weight: 500; font-size: 28rpx; color: #3483f6" v-if="item.status == 11">订单超时已取消</view>
        <view style="font-weight: 500; font-size: 28rpx; color: #3483f6" v-if="item.status == 10">司机取消订单</view>
        <view style="font-weight: 500; font-size: 28rpx; color: #3483f6" v-if="item.status == 9 && item.length_money_draw == '0.00'">用户取消订单</view>
        <view style="font-weight: 500; font-size: 28rpx; color: #3483f6" v-if="item.status == 9 && item.length_money_draw != '0.00'">订单关闭</view>
        <view style="font-weight: 500; font-size: 28rpx; color: #3483f6" v-if="false">行程中</view>
        <view style="font-weight: 500; font-size: 28rpx; color: #3483f6" v-if="item.status == 6 && item.child == 1">待支付</view>
        <view style="font-weight: 500; font-size: 28rpx; color: #3483f6" v-if="(item.status == 6 && item.child == 2) || item.status == 8">待评价</view>
        <view style="font-weight: 500; font-size: 28rpx; color: #3483f6" v-if="item.status == 12">已完成</view>
        <view style="font-weight: 500; font-size: 28rpx; color: #3483f6" v-if="false">订单关闭</view>
      </view>

      <!-- 地点 -->
      <view style="box-sizing: border-box; padding: 26rpx 24rpx 24rpx 22rpx">
        <!-- 起点 -->
        <view style="display: flex; align-items: center">
          <image src="../../static/mine/start.png" mode="" style="width: 24rpx; height: 24rpx; margin-right: 14rpx"></image>
          <view
            style="width: 476rpx; font-weight: bold; font-size: 28rpx; color: #222222; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden"
          >
            {{ item.starting }}
          </view>
        </view>
        <!-- 终点 -->
        <view style="display: flex; align-items: center; margin-top: 32rpx">
          <image src="../../static/mine/end.png" mode="" style="width: 24rpx; height: 24rpx; margin-right: 14rpx"></image>
          <view
            style="width: 476rpx; font-weight: bold; font-size: 28rpx; color: #222222; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden"
          >
            {{ item.end }}
          </view>
          <view>
            <text style="font-weight: bold; font-size: 32rpx; color: #f30021; padding-right: 4rpx">{{ item.actual_money }}</text>
            <text style="font-weight: 500; font-size: 24rpx; color: #222222">元</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import dayjs from 'dayjs';
export default {
  data() {
    return {
      page: 1,
      list: []
    };
  },
  onLoad() {
    this.getlist();
  },
  methods: {
    // 获取订单列表
    getlist() {
      this.http('/order/list', {
        page: this.page
      }).then((res) => {
        this.list = res.data.list;
        this.list.forEach((item) => {
          item.calltime = dayjs(item.createtime * 1000).format('YYYY-MM-DD HH:mm');
        });
        console.log('修改后的订单列表', res);
      });
    },
    // 跳转到详情
    godetail(item) {
      if (item.status == 2) {
        //待接单
        uni.navigateTo({
          url: '/order/callorderdetail/callorderdetail?orderid=' + item.id
        });
      } else if (item.status == 3) {
        // 司机已接单
        uni.navigateTo({
          url: '/order/reciveorder/reciveorder?orderid=' + item.id
        });
      } else if (item.status == 4) {
        // 司机到达起点
        uni.navigateTo({
          url: '/order/arriverstart/arriverstart?orderid=' + item.id
        });
      } else if ((item.status == 9 && item.length_money_draw == '0.00') || item.status == 10) {
        // 用户取消订单
        uni.navigateTo({
          url: '/order/orderunovertime/orderunovertime?orderid=' + item.id
        });
      } else if (item.status == 11) {
        // 自动取消订单
        uni.navigateTo({
          url: '/order/autocancelorder/autocancelorder?orderid=' + item.id
        });
      } else if (item.status == 5) {
        //行程中
        uni.navigateTo({
          url: '/order/goend/goend?orderid=' + item.id
        });
      } else if (item.status == 8 || (item.status == 6 && item.child == 2)) {
        // 去评价
        uni.navigateTo({
          url: '/order/waitpingjia/waitpingjia?orderid=' + item.id
        });
      } else if (item.status == 6 && item.child == 1) {
        // 支付超时差价
        uni.navigateTo({
          url: '/order/waitpay/waitpay?orderid=' + item.id
        });
      } else if (item.status == 12) {
        // 已完成
        uni.navigateTo({
          url: '/order/complateorder/complateorder?orderid=' + item.id
        });
      } else if (item.status == 9 && item.length_money_draw != '0.00') {
        uni.navigateTo({
          url: '/order/orderovertime/orderovertime?orderid=' + item.id
        });
      }
    }
  },
  // 触底加载更多
  onReachBottom() {
    this.page++;
    this.http('/order/list', {
      page: this.page
    }).then((res) => {
      if (res.data.list.length != 0) {
        res.data.list.forEach((item) => {
          item.calltime = dayjs(item.createtime * 1000).format('YYYY-MM-DD HH:mm');
        });
        this.list.push(...res.data.list);
        console.log('修改后的订单列表', res);
      } else {
        uni.showToast({
          title: '数据已全部加载完毕',
          icon: 'none'
        });
      }
    });
    console.log('触底了');
  },
  // 上拉刷新
  async onPullDownRefresh() {
    this.page = 1;
    await this.getlist();
    uni.stopPullDownRefresh();
    console.log('刷新了');
    //请求商品列表
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .item {
    box-sizing: border-box;
    margin: 20rpx 24rpx;
    background-color: #fff;
    .header {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 90rpx;
      padding: 28rpx 24rpx 22rpx 20rpx;
      border-bottom: 1px solid #e7e7e7;
    }
  }
}
</style>
<style>
page {
  background-color: #f8f9fa;
}
</style>